<template>
	<view class="login">
		<view class="title">
			<view style="font-size: 38rpx;"> 欢迎登录，</view>
			<view style="font-size: 58rpx;margin-top: 2%;">
				淄博鑫润担保平台
			</view>
		</view>
		<view class="main">
			<u-form class="loginForm" :model="loginFormData" :rules="rules" ref="loginForm" labelWidth="100">
				<u-form-item label="账号" :required="true" prop="username">
					<u-input prefixIcon="account" v-model="loginFormData.username" placeholder="账号"> </u-input>
				</u-form-item>
				<u-form-item label="密码" :required="true" prop="password">
					<u-input prefixIcon="lock" type="password" v-model="loginFormData.password" placeholder="密码"> </u-input>
				</u-form-item>
				<u-form-item label="验证码" :required="true" prop="vc">
					<u-input prefixIcon="chat" v-model="loginFormData.vc" placeholder="验证码">
						<template slot="suffix">
							<u--image @click="getVcCode" :src="loginFormData.url" width="200rpx" height="50rpx"  ></u--image>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="loginBtn" @click="login">登 录</view>
		</view>
	</view>
</template>

<script>
	import aes from "@/utils/crypto";
	import { getCode,login } from '@/service/api/login.js';

	export default {
		data() {
			return {
				loginFormData:{
					username:'fuquanmeng',
					password:'',
					vcToken:'',
					vc:'',
					url:''
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'vc': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		async onLoad() {
			this.getVcCode()
		},
		methods:{
			async login(){
				this.$refs.loginForm.validate().then(async valiRes => {
					const { url,password,...others } = this.loginFormData;
					const params = {
						...others,
						password:aes.encrypt(password)
					};
					const res = await login(params);
					console.log('login',res);
					const { data,status,msg } = res.data;
					uni.$u.toast(msg);
					uni.$u.sleep(3500);
					if(status){
						uni.setStorageSync('userInfo', JSON.stringify(data));
						uni.navigateTo({
							url: '/pages/index/index'
						});
					} 
				}).catch()
			},
			async getVcCode(){
				const t = new Date().getTime();
				const res = await getCode({t})
				//console.log('getCode',res);
				this.loginFormData.vcToken = res.header.vctoken;
				const blob = new Blob([res.data], { type: 'image/jpeg' });
				const url = URL.createObjectURL(blob); // 正确
				//console.log('url',blob);
				this.loginFormData.url = url;
				console.log('this.loginFormData',this.loginFormData);
			}
		}
	}
</script>

<style lang="scss">
.login{
	min-height: 100vh;
	background-image: url('@/static/login/bg.png');
	background-size: 100% 100%;
	padding: 15rpx 25rpx;
	.title{
		color: #fff;
		font-weight: bold;
		margin: 15% 0 13% 5%;
	}
	.main{
		box-sizing: border-box;
		background-image: url('@/static/login/box.png');
		background-size: 100% 100%; 
		height: 50vh;
		padding: 20% 10%;
	}
	.loginForm{
		/deep/.u-input__content__prefix-icon{
			.u-icon__icon{
				font-size: 22px !important;
				color:#999 !important;
			}
		}
	}
	.loginBtn{
		background: linear-gradient(90deg,#3098FF 0%, #2A80F9 52%, #4666F2 100%);
		font-weight: bold;
		margin-top: 50rpx;
		width: 100%;
		color: white;
		border-radius: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
	}
}
</style>
